<template>
  <div id="app" @contextmenu.prevent>
    <!-- 页眉 -->
    <header-page v-if="token"></header-page>
    <!-- aside && main -->
    <el-container class="el-container" v-if="token">
      <!-- aside -->
      <aside-page></aside-page>
      <!-- main -->
      <!-- <router-view name="main"></router-view> -->
      <main-page></main-page>
    </el-container>

    <!-- 页脚 -->
    <!-- <footer-page v-if="token"></footer-page> -->

    <!-- 登陆页面 -->
    <template v-if="!token">
      <router-view name="login"></router-view>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import HeaderPage from '@/components/HeaderPage.vue'
// import FooterPage from '@/components/FooterPage.vue'
import AsidePage from '@/components/AsidePage.vue'
import MainPage from '@/components/MainPage.vue'


export default {
  name: "App",
  data() {
    return {
      activeIndex: '/tools/new-friend',
    }
  },
  components: {
    HeaderPage,
    // FooterPage,
    AsidePage,
    MainPage
  },
  computed: {
    ...mapGetters({
      token: 'token'
    })
  },
  watch: {
    token(val) {
      if (!val) {
        // 转到登陆页面
        this.$router.replace({ name: 'login' })
        // 如果是electron 调整窗口大小
        if (this.$store.getters.currentMode === 'electron') {
          // 退出登陆的loading
          const loading = this.$loading({
            lock: true,
            text: '正在退出',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
          // 调整窗口大小
          this.$ipcRenderer.send('operations', 'logout')
        }
      }
    }
  }
};
</script>

<style lang="scss">
@import "./styles/reset.scss";
@import "./styles/normalize.scss";
@import "./styles/common.scss";
@import "./styles/qqface.scss";
@import "~@/assets/iconfont/iconfont.css";
@import "~@/assets/font-awesome/css/font-awesome.css";

#app {
  font-size: $font-size-base;
  color: $color-common;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF UI Text",
    "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .el-container {
    flex: 1 1 auto;
    overflow: hidden;
    background-color: white;
  }
}
</style>
